<!DOCTYPE html>
<html>
<head>
    <title>测试验证码功能</title>
</head>
<body>
    <h1>测试验证码</h1>
    <p>点击下面按钮获取验证码：</p>
    <div>
        <button id="getCaptchaButton">获取验证码</button>
    </div>
    <div>
        <input type="text" id="captchaInput" placeholder="请输入验证码">
        <button id="verifyButton">验证</button>
    </div>
    <div id="captchaImageContainer">
        <!-- 这里将显示验证码图片 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 点击按钮获取验证码
             var uuid = null;
            $("#getCaptchaButton").click(function() {
                uuid = generateUUID();
                console.log("getCaptchaButton",uuid);
                $("#captchaImageContainer").html('<img src="/captcha?uuid=' + uuid + '">');
            });

            // 点击按钮验证验证码
            $("#verifyButton").click(function() {
             //   var uuid = generateUUID();
               console.log("verifyButton",uuid);
                var code = $("#captchaInput").val();

                $.ajax({
                    type: "POST",
                    url: "/verifyCaptcha",
                    data: {
                        uuid: uuid,
                        code: code
                    },
                    success: function(response) {
                        alert(response); // 验证码正确的处理逻辑
                    },
                    error: function(xhr, status, error) {
                        alert(xhr.responseText); // 验证码错误的处理逻辑
                    }
                });
            });

            // 生成UUID函数
            function generateUUID() {
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now(); 
                }
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
                return uuid;
            }
        });
    </script>
</body>
</html>
